<template>
  <div class="resource">
    <header class="header">
      <div class="header_left">
        <div class="breadcrumb">
          <span
              v-for="(item, index) in $store.state.file.resource"
              :key="index"
          >
            <span v-if="index > 0"> / </span>
            <a @click="handleBreadcrumbClick(item, index)">{{ item.name }}</a>
          </span>
        </div>
      </div>
    </header>
    <!-- 右键-->
    <div
        class="backups_file_container"
        @contextmenu.prevent="showContextMenu($event)"
    >
      <div v-show="showMenu" class="context_menu_container">
        <div
            :style="{ top: `${menuY}px`, left: `${menuX}px` }"
            class="context_menu"
        >
          <ul class="context_menu_items">
            <li class="context_menu_item" @click="dialogNewFile = true">
              <div class="context_menu_item_icon">
                <i class="el-icon-folder-add"></i>
              </div>
              <div class="context_menu_item_text" @click="dialogNewFile = true">新建文件夹</div>
            </li>
            <li class="context_menu_item"  @click="showUploadFileFun">
              <div class="context_menu_item_icon">
                <i class="el-icon-upload2"></i>
              </div>
              <div class="context_menu_item_text">上传文件</div>
            </li>
            <li class="context_menu_item" @click.s.stop="refresh()">
              <div class="context_menu_item_icon">
                <i class="el-icon-refresh"></i>
              </div>
              <div class="context_menu_item_text" >刷新页面</div>
            </li>
          </ul>
        </div>
      </div>
      <div style="margin-top: 20px"></div>
      <!--    filecard-->
      <div class="backups_file_list">
        <FileCardd
            :showMenu="showMenu"
            @childEvent="handleChildEvent"
        ></FileCardd>
      </div>
    </div>
    <!--    新建文件夹-->

    <el-dialog
        :visible.sync="dialogNewFile"
        custom-class="my-dialog"
        height="368px"
        title="新建文件夹"
        width="340px"
    >
      <form action="" class="dialog_menu">
        <div class="dialog_file">
          <img
              alt=""
              src="https://img.alicdn.com/imgextra/i1/O1CN01rGJZac1Zn37NL70IT_!!6000000003238-2-tps-230-180.png"
              style="width: 115px; height: 90px"
          />
        </div>
        <el-input v-model="newFile_input"></el-input>
      </form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogNewFile = false">取 消</el-button>
        <el-button type="primary" @click="createFolder(newFile_input)"
        >确 定
        </el-button
        >
      </div>
    </el-dialog>
    <upload-file
        ref="uploadFile"
        :show="showUploadFile"
        type="resource"
        @chose="showUploadFile = false"
        @confirm="uploadFileConfirm"
    />

  </div>
</template>

<script>
import UploadFile from "@/views/file/components/uploadFile";
import Breadcrumb from "@/components/Breadcrumb/index.vue";
import FileCardd from "@/components/FileCardd/fileCardd.vue";
import {mapMutations} from "vuex";
import {createFolder, getFolder} from "@/api/resource";
import {typeList} from "@/components/FileCard/icon.js"

export default {
  data() {
    return {
      newFile_input: "新建文件夹",
      overlay: false,
      filterList: true,
      tagText: "",
      isBasicActive: true,
      isSmartActive: false,
      showMenu: false,
      showFileMenu: false,
      listSum: 1, //列表中文件数量
      // showMenu: false, // 是否显示右键菜单
      menuX: 0, // 菜单的水平位置
      menuY: 0, // 菜单的垂直位置
      dialogNewFile: false,
      typeList,
      showUploadFile: false
    };
  },

  created() {
    this.initBreadCrumbs();
    this.getFolderList();
  },
  methods: {
    ...mapMutations("file", [
      "pushResource",
      "pushFolderList",
      "deleteFolderList",
      "deleteResource",
      "deleteResourceList",
      "pushResourceList",
      "matchResource",
    ]),
    initBreadCrumbs() {
      this.deleteResource();
      // console.log(this.$store.state.file.resource);
      this.pushResource({id: 0, name: "资源库"});
    },
    showUploadFileFun() {
      console.log('----------showUploadFile----------')
      this.showUploadFile = true;
      this.$refs.uploadFile.id = this.$store.state.file.resource[this.$store.state.file.resource.length - 1].id;
    },
    uploadFileConfirm() {
      this.showUploadFile = false;
      console.log("上传文件",this.$store.state.file.resource[this.$store.state.file.resource.length - 1].id);
      getFolder(this.$store.state.file.resource[this.$store.state.file.resource.length - 1].id).then((res) => {
        let data = [];
        this.deleteResourceList(data);
        for (let item of res.data) {
          this.pushResourceList(item);
        }
      });
    },
    // 创建文件夹
    createFolder(crateForm) {
      var id = this.$store.state.file.resource.slice(-1)[0].id
      console.log(id, crateForm)
      createFolder({pid: id, name: crateForm}).then(res => {
        if (res.code === 200) {
          this.$message.success("创建成功")
          this.refresh()
          this.dialogNewFile = false
        }
      })
    },
    // 获取文件夹列表
    getFolderList() {
      this.deleteResourceList()
      getFolder(0).then(res => {
        console.log(this.$store.state.file.resource.length)
        if (this.$store.state.file.resource.length === 0) {
          this.pushResource({'id': 0, 'name': "资源盘"})
        }
        for (let item of res.data) {
          this.pushResourceList(item)
        }
      })
      console.log("ziyuan", this.$store.state.file.resourceList)
    },
    // 刷新
    refresh() {
      console.log("刷新");
      var id = this.$store.state.file.resource.slice(-1)[0].id;
      this.deleteResourceList();
      getFolder(id).then((res) => {
        for (let item of res.data) {
          this.pushResourceList(item);
        }
      });
    },
    showContextMenu(event) {
      // 阻止默认的右键菜单
      event.preventDefault();
      // 获取鼠标位置
      this.menuX = event.clientX;
      this.menuY = event.clientY;
      // 显示右键菜单
      this.showMenu = true;

      // 监听鼠标点击事件，隐藏右键菜单
      document.addEventListener("click", this.hideContextMenu);
    },
    hideContextMenu() {
      // 隐藏右键菜单
      this.showMenu = false;
      // 移除鼠标点击事件监听
      document.removeEventListener("click", this.hideContextMenu);
    },
    handleChildEvent(data) {
      // console.log('---------------------',data)
      this.showFileMenu = data;
    },

    // 点击面包屑
    handleBreadcrumbClick(item, index) {
      console.log(index);
      this.matchResource(index);
      getFolder(item.id).then(res => {
        // console.log("dianjie",res)
        this.deleteResourceList()
        for (let item of res.data) {
          this.pushResourceList(item)
        }
      })
    }
  },
  components: {
    Breadcrumb,
    FileCardd,
    UploadFile
  },
};
</script>

<style lang="scss" scoped>
.resource {
  width: 100%;
  height: 100%;
  display: flex;
  padding: 0 40px;
  //padding-top: 24px;
  flex-direction: column;
  position: relative;

  .my-dialog {
    .el-dialog__body {
      .dialog_menu {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100%;
        height: 180px;

        .dialog_file {
          margin-bottom: 20px;
        }
      }
    }
  }

  .context_menu_container {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 999;

    .context_menu {
      position: fixed;
      width: 150px;
      background-color: #fff;
      box-shadow: 0 2px 4px rgba(0, 13, 0, 0.5);
      border-radius: 5px;
      padding: 4px;
      z-index: 1000;

      .context_menu_items {
        list-style: none;
        padding: 0;
        margin: 0;

        .context_menu_item {
          height: 36px;
          border-radius: 5px;
          padding: 4px 4px;
          display: flex;
          align-items: center;

          .context_menu_item_icon {
            font-size: 16px;
            margin-right: 5px;
          }

          .context_menu_item_text {
            font-size: 15px;
            color: #504e4e;
          }
        }

        .context_menu_item:hover {
          background-color: rgba(132, 133, 141, 0.08);
        }
      }
    }
  }

  .overlay-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999; /* 控制蒙层在页面中的层级 */
    .search_dialog {
      width: 620px;
      border: 1px solid #ccc;
      border-radius: 10px;
      margin: 150px auto;
      position: relative;
      background-color: #fff;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column;
      align-items: center;

      .search_input {
        position: absolute;
        top: 9px;
        left: 0;
        right: 60px;
        height: 52px;
        padding-left: 24px;
        display: flex;
        -ms-flex-align: center;
        justify-content: space-between;
        align-items: center;

        .search_input_clear {
          cursor: pointer;
          height: 28px;
          width: 30px;
          padding: 0 8px;
          font-size: 12px;
          box-sizing: content-box;
          border-radius: 3px;
          display: flex;
          align-items: center;
          color: #807e7e;
          white-space: nowrap;
        }

        .search_input_clear:hover {
          background-color: rgb(132, 133, 141, 0.08);
        }

        .search_input_tag {
          background-color: rgb(99, 125, 255, 0.12);
          color: rgb(99, 125, 255);
          font-size: 18px;
          border-radius: 4px;
          padding: 4px;
          margin-right: 6px;
          display: inline-block;
          white-space: nowrap;
        }

        input {
          border: none;
          outline: none;
          caret-color: rgb(99, 125, 255);
          height: 25px;
          width: 546px;
        }

        input::placeholder {
          color: #ccc;
        }
      }

      .search_menu {
        width: 100%;
        margin-top: 64px;
        position: relative;
        bottom: 0;

        .search-filter-list {
          position: relative;
          list-style: none;
          display: flex;
          flex-direction: column;
          padding: 0 12px;
          margin: 5px 0;

          .search-filter-list-item {
            padding-left: 12px;
            height: 40px;
            display: flex;
            align-items: center;
            border-radius: 4px;
            font-size: 14px;
            color: rgb(37, 38, 43);

            i {
              font-size: 20px;
              color: rgb(37, 38, 43);
            }

            .search-filter-list-item-icon {
              margin-right: 12px;
            }
          }

          .search-filter-list-item:hover {
            background-color: rgb(132, 133, 141, 0.08);
          }
        }
      }

      .search_bottom {
        background-color: #fff;
        font-size: 14px;
        color: rgb(37, 38, 43, 0.72);
        display: flex;
        align-items: center;
        position: absolute;
        justify-content: space-between;
        left: 0;
        bottom: -50px;
        width: 620px;
        height: 40px;
        border: 1px solid #ccc;
        border-radius: 10px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        padding: 0 24px;

        .search_bottom_icon {
          margin-right: 5px;
        }

        .search_bottom_tag {
          background-color: rgb(99, 125, 255, 0.12);
          color: rgb(99, 125, 255);
          font-size: 14px;
          border-radius: 4px;
          padding: 4px;
          margin-right: 6px;
          display: inline-block;
          white-space: nowrap;
        }
      }

      .close {
        position: absolute;
        right: 16px;
        top: 22px;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 5px;
      }

      .close:hover {
        background-color: rgb(132, 133, 141, 0.08);
      }
    }
  }

  .header {
    display: flex;
    justify-content: space-between;

    .header_left {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .top_tab {
      border: 1px solid rgb(132, 133, 141, 0.2);
      display: flex;
      width: 128px;
      height: 26px;
      box-sizing: border-box;
      padding: 2px;
      border-radius: 5px;
      align-items: center;
      font-size: 12px;
      color: #807e7e;
      margin-left: 10px;
      cursor: pointer;

      .tab_basic,
      .tab_smart {
        height: 22px;
        width: 62px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 5px;
      }

      .tab_basic.active,
      .tab_smart.active {
        background-color: rgb(99, 125, 255, 0.16);
        color: rgb(99, 125, 255);
      }
    }

    .search {
      cursor: pointer;
      width: 146px;
      height: 28px;
      border-radius: 5px;
      opacity: 1;
      padding: 4px;
      display: flex;
      cursor: pointer;
      align-items: center;
      font-size: 12px;
      background-color: rgb(132, 133, 141, 0.07);
      color: rgb(37, 38, 43, 0.36);

      .el-icon {
        font-size: 20px;
      }
    }
  }

  .backups_file_container {
    width: 100%;
    height: 100%;
    position: relative;

    .backups_file_list {
      //display: flex;
      //justify-content: left;
      //flex-flow: row wrap;
      //overflow: auto;
    }
  }

  .backups_wrapper {
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .backups_list_change {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      margin-left: 16px;
      border-radius: 4px;
    }

    .backups_list_change:hover {
      background-color: rgb(132, 133, 141, 0.08);
    }

    .backups_list_sum {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;

      .backups_list_sum_text {
        display: flex;
        align-items: center;
        font-size: 12px;
        color: rgb(37, 38, 43, 0.72);
        font-weight: 500;
        margin-left: 10px;
      }
    }
  }
}

.breadcrumb {
  height: 40px;
  font-size: 18px;
  display: flex;
  align-items: center;
  font-weight: 600;
  color: rgb(37, 38, 43);
}
</style>
